<template>
  <page-container>
    <a-card>
      <a-form :form="form">
        <a-row>
          <a-col :span="8">
            <a-form-item label="规则集名称" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <a-input
                v-decorator="[
                  'gender',
                  {
                    rules: [{ required: true, message: 'Please input your note!' }]
                  }
                ]"
                placeholder="规则集名称"
              />
            </a-form-item>
          </a-col>

          <a-col :span="15" :offset="1">
            <a-form-item label="规则集描述" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
              <a-input
                v-decorator="[
                  'gender',
                ]"
                placeholder="请输入规则集描述"
              />
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="决策结果" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <a-input
                v-decorator="[
                  'gender',
                ]"
                placeholder="规则集名称"
              />
            </a-form-item>
          </a-col>

          <a-col :span="15" :offset="1">
            <a-form-item label="结果说明" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
              <a-input
                v-decorator="[
                  'gender',
                ]"
                placeholder="结果说明"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-card class="card">
      <div class="decision-mak-container">
        <div class="container index-container">
          <div class="selects-container">
            <div class="select-item">
              <a-select class="select" default-value="one" @change="handleChange">
                <a-select-option value="one">
                  年龄大于18小于55
                </a-select-option>
                <a-select-option value="two">
                  信用分大于600
                </a-select-option>
                <a-select-option value="three">
                  未涉赌
                </a-select-option>
                <a-select-option value="four">
                  未严重逾期
                </a-select-option>
                <a-select-option value="five">
                  请选择指标
                </a-select-option>
              </a-select>
              <div class="icon">
                <a-icon type="minus-circle" />
              </div>
            </div>
            <div class="select-item">
              <a-select class="select" default-value="two" @change="handleChange">
                <a-select-option value="one">
                  年龄大于18小于55
                </a-select-option>
                <a-select-option value="two">
                  信用分大于600
                </a-select-option>
                <a-select-option value="three">
                  未涉赌
                </a-select-option>
                <a-select-option value="four">
                  未严重逾期
                </a-select-option>
                <a-select-option value="five">
                  请选择指标
                </a-select-option>
              </a-select>
              <div class="icon">
                <a-icon type="minus-circle" />
              </div>
            </div>
            <div class="select-item">
              <a-select class="select" default-value="three" @change="handleChange">
                <a-select-option value="one">
                  年龄大于18小于55
                </a-select-option>
                <a-select-option value="two">
                  信用分大于600
                </a-select-option>
                <a-select-option value="three">
                  未涉赌
                </a-select-option>
                <a-select-option value="four">
                  未严重逾期
                </a-select-option>
                <a-select-option value="five">
                  请选择指标
                </a-select-option>
              </a-select>
              <div class="icon">
                <a-icon type="plus-circle" />
              </div>
            </div>
            <div class="select-item">
              <a-select class="select" default-value="four" @change="handleChange">
                <a-select-option value="one">
                  年龄大于18小于55
                </a-select-option>
                <a-select-option value="two">
                  信用分大于600
                </a-select-option>
                <a-select-option value="three">
                  未涉赌
                </a-select-option>
                <a-select-option value="four">
                  未严重逾期
                </a-select-option>
                <a-select-option value="five">
                  请选择指标
                </a-select-option>
              </a-select>
              <div class="icon">
                <a-icon type="plus-circle" />
              </div>
            </div>
            <div class="btn">
              <a-button>确定</a-button>
            </div>
          </div>
        </div>
        <div class="container implement-container">
          <div class="title">指标名称</div>
          <div class="implement-item">年龄大于18小于55</div>
          <div class="implement-item">信用分大于600</div>
          <div class="implement-item">未涉赌</div>
          <div class="implement-item">未严重逾期</div>
        </div>
      </div>
      <div class="submit-container">
        <a-button type="primary">
          提 交
        </a-button>
        <a-button class="button">取 消</a-button>
      </div>
    </a-card>
  </page-container>
</template>

<script>

export default {
  data () {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
    }
  },

  methods: {
    handleSubmit () {},
    handleChange () {}
  },
}
</script>

<style lang="scss" scoped>
.card {
  margin-top: $margin-sm;
}

.decision-mak-container {
  display: flex;

  & > .container {
    padding: $padding-xs;
    border: 1px solid $gray-16;
    height: 400px;

    overflow-y: auto;
  }
  .index-container {
    width: 300px;

    .selects-container {
      .select-item {
        display: flex;
        align-items: center;
        margin-bottom: $margin-sm;
        .select {
          flex: 1;
        }

        .icon {
          padding-left: 20px;
          font-size: 22px;
          cursor: pointer;
          line-height: 1em;
          color: rgba($color: #000000, $alpha: 0.3);
          transition: color 1s;
        }

        .icon:hover {
          color: $theme-color;
          font-weight: bold;
        }
      }
      .btn {
        position: relative;
        bottom: 1px;
      }
    }
  }

  .implement-container {
    flex: 1;
    margin-left: $margin-sm;
    .implement-item {
      border: 1px solid ;
      margin: 10px 0px;
    }
  }
}
.submit-container {
  margin-top: $margin-sm;
  .button {
    margin-left: $margin-xs;
  }
}
</style>
